<!-- 我的主页 -->
<template>
  <view class="credit">
    <PageWarpper>
      <template v-slot:main>
        <view class="current-credit border-top border-bottom">
          <text class="intel-one-mono-regular">{{ currentPoint }}</text>
          <br />
          积分
        </view>
        <!--记录-->
		<view class="record-container" v-if="record.length != 0">
			<view
			  class="record border-bottom d-flex"
			  v-for="(item, index) in record"
			  :key="index"
			>
			  <view class="record-info">
				<view class="tit siyuan-medium">
				  {{ item.point > 0 ? "获取积分" : "积分清除" }}
				</view>
				<view class="desc">{{ item.note }}</view>
				<view class="time">
				  时间：
				  <text class="intel-one-mono-regular">{{ item.createTime }}</text>
				</view>
			  </view>
			  <text class="price intel-one-mono-medium">{{ item.point }}</text>
			</view>
		</view>
        <view style="margin-top: 133px" v-if="record.length == 0 && currentPage > 1">
          <EmptyCard
            :info="{
              icon: 'empty_icon3',
              iconWidth: '222rpx',
              tip: '暂无数据',
              es: 'No Datas',
              desc: '暂无相关内容，请检查重试',
            }"
          />
        </view>
      </template>
    </PageWarpper>
    <FooterBar :tab-index="2" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { pointDetail } from "@/server/api.js";
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import FooterBar from "@/components/FooterBar/index.vue";
import EmptyCard from "@/pages/empty/Card.vue";

import { onReachBottom } from "@dcloudio/uni-app";

let record = ref([]);

let currentPoint = ref(0);
let currentPage = ref(1);
let isLoad = ref(true);

const getList = () => {
  pointDetail({
    current: currentPage.value,
    size: 20,
  }).then(res => {
    currentPage.value = currentPage.value + 1;
    isLoad.value = !(res.data.records.length == 0);
    currentPoint = res.data.currentPoint;
    record.value = [...record.value, ...res.data.records];
  });
};
getList();

onReachBottom(() => {
  isLoad.value ? getList() : null;
});
</script>

<style lang="scss" scoped>
.current-credit {
  padding: 68rpx 0 56rpx;
  background-color: #ffffff;
  font-size: 26rpx;
  text-align: center;
  text {
    font-size: 64rpx;
  }
}
.record-container {
	padding-bottom: 100px;
}
.record {
  padding: 34rpx 52rpx;
  background-color: #ffffff;
  align-items: center;
  .price {
    font-size: 24rpx;
  }
  .record-info {
    flex: 1;
    font-size: 20rpx;
    .tit {
      font-size: 24rpx;
    }
    .desc {
      padding: 10rpx 0 36rpx;
    }
    .time,
    .time > text {
      color: #c9caca;
    }
  }
}
</style>
